import { defineComponent } from "vue";
import styles from "./ImportMid.module.less";
import { UploadOutlined } from "@ant-design/icons-vue";
import { useStore as useAnalysisStore } from "@/store/analysis";
import VueJsonPretty from 'vue-json-pretty';
import { message } from "ant-design-vue";
import _ from "lodash";
import useDealMid from "@/common/hooks/dealMid";
export default defineComponent({
  setup() {
    const dealMidHook = useDealMid();
    const analysisStore = useAnalysisStore();
    const beforeUploadMid = () => {
      return false;
    }
    const dealFile = async () => {
      if (!analysisStore.file?.mid?.originFileObj) {
        message.error("请上传mid文件");
        return;
      }
      const urlMid = URL.createObjectURL(analysisStore.file?.mid?.originFileObj);
      await dealMidHook.dealFile(urlMid);
    }
    return () => (
      <div class={styles.flows}>
        <div class={styles.step}>
          <div class={styles['step-flag']}>第一步</div>
          <span>上传mid文件</span>
        </div>
        <div class={styles['step-content']}>
          <a-upload
            file-list={analysisStore.file?.mid ? [analysisStore.file?.mid] : []}
            onChange={(e) => {analysisStore.file.mid = e?.fileList[0]}}
            before-upload={beforeUploadMid}
            maxCount={1}
          >
            <a-button>
              <UploadOutlined />
              <span>点击上传mid文件</span>
            </a-button>
          </a-upload>
        </div>
        <div class={styles.step}>
          <div class={styles['step-flag']}>第二步</div>
          <span>解析文件</span>
        </div>
        <div class={styles['step-content']}>
          <a-button type="primary" onClick={() => {
            dealFile();
          }}>点击解析文件</a-button>
        </div>
        <div class={styles.step}>
          <div class={styles['step-flag']}>第三步</div>
          <span>填写速度</span>
        </div>
        <div class={styles['step-content']}>
          <a-input-number v-model:value={dealMidHook.state.value.tempo} min={0} />
        </div>
        <div class={styles.step}>
          <div class={styles['step-flag']}>结果</div>
          <span>解析生成的数据格式展示</span>
        </div>
        <div class={styles['step-content']}>
          <div class={styles['result-content']}>
            <VueJsonPretty data={dealMidHook.result.value} />
          </div>
        </div>
      </div>
    )
  }
})